<template>
	<z-paging ref="paging" v-model="data" @query="queryList" show-refresher-when-reload>
		<view v-for="(item,index) in data" :key="item.id" class="content flex-row" @click="favorite_item_click(item)">
			<view class="serial">{{index + 1}}</view>
			<view class="title"> {{item.topic.question_content}}</view>
			<view class="trash" @click.stop="favorite_trash(item)">
				<uni-icons type="trash" size="24"></uni-icons>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const paging = ref(null)
	const data = ref([])
	const favorite = uniCloud.importObject('favoriteObj', {
		customUI: true
	})

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = async (pageNo, pageSize) => {
		let res = await favorite.favorite_topic(pageNo, pageSize)
		console.log("我的收藏", res);
		if (res.errCode != 0) {
			paging.value.complete(false)
			return
		}
		paging.value.complete(res.data)
	}

	function favorite_item_click(params) {
		uni.navigateTo({
			url: '/pages_lianxi/linianzhenti/topic_single_practice?id=' + params.topic._id + '&type=1'
		})
	}

	function favorite_trash(params) {
		uni.showModal({
			title: '温馨提示',
			content: `是否删除“${params.topic.question_content}"？`,
			success: (res) => {
				if (res.confirm) {
					favorite_trash_func(params)
				}
			}
		})
	}

	async function favorite_trash_func(params) {
		let res = await favorite.favorite(params.article_id, 2, true)
		console.log("取消收藏", res);
		let flag = res.errCode == 0
		uni.showToast({
			title: flag ? '已取消收藏' : res.errMsg,
			icon: flag ? 'success' : "fail"
		})
		if (flag) {
			paging.value.refresh()
		}
	}

	uni.$on('topic_favorite', () => {
		if (paging.value) {
			paging.value.refresh()
		}
	})
</script>

<style lang="scss">
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.content {
		margin: 20rpx 20rpx 0;
		padding: 20rpx 20rpx;
		background-color: $me-color-background;
		border-radius: 8rpx;
		align-items: center;
	}

	.serial {
		font-size: 28rpx;
		color: $me-color-gray-3;
	}

	.title {
		flex: 1;
		margin-left: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
		color: $me-color-gray-1;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.trash {
		padding: 10rpx 0 0 10rpx;
	}
</style>